
// 因为没有ts,所以无法支持.
// import { defineComponent, ref } from 'vue';

// // 定义Props类型接口
// interface CounterProps {
//   initialValue?: number;
//   step?: number;
// }

// export default defineComponent({
//   name: 'Counter',
//   // 带类型定义的props
//   props: {
//     initialValue: {
//       type: Number as () => number,
//       default: 0
//     },
//     step: {
//       type: Number as () => number,
//       default: 1
//     }
//   },
//   // 明确指定props类型
//   setup(props: CounterProps) {
//     const count = ref<number>(props.initialValue);
    
//     const increment = (): void => {
//       count.value += props.step;
//     };
    
//     const decrement = (): void => {
//       count.value -= props.step;
//     };
    
//     const reset = (): void => {
//       count.value = props.initialValue;
//     };
    
//     return () => (
//       <div style={{ 
//         textAlign: 'center', 
//         marginTop: '2rem',
//         fontFamily: 'Arial, sans-serif'
//       }}>
//         <h1>Vue TSX Counter</h1>
//         <p style={{ fontSize: '2rem', margin: '2rem 0' }}>{count.value}</p>
//         <div style={{ display: 'flex', gap: '1rem', justifyContent: 'center' }}>
//           <button 
//             onClick={decrement}
//             style={{ 
//               padding: '0.5rem 1rem', 
//               fontSize: '1rem',
//               cursor: 'pointer'
//             }}
//           >
//             -
//           </button>
//           <button 
//             onClick={reset}
//             style={{ 
//               padding: '0.5rem 1rem', 
//               fontSize: '1rem',
//               cursor: 'pointer'
//             }}
//           >
//             Reset
//           </button>
//           <button 
//             onClick={increment}
//             style={{ 
//               padding: '0.5rem 1rem', 
//               fontSize: '1rem',
//               cursor: 'pointer'
//             }}
//           >
//             +
//           </button>
//         </div>
//         <p style={{ marginTop: '1rem', color: '#666' }}>
//           步长: {props.step}
//         </p>
//       </div>
//     );
//   },
// });